<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
  <head>
      <base href="<%=basePath%>">
      <title>借阅信息查询界面</title>
      <meta charset="UTF-8">

      <link rel="stylesheet" type="text/css" href="css/admin/returnDetail.css">

      <%-- 引入jquery --%>
      <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

      <%--  引入bootstrap框架--%>
      <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
      <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

      <%-- 引入Bootstrap datetimepicker插件 --%>
      <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
      <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
      <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

      <%-- 引入pagination --%>
      <link type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" rel="stylesheet"/>
      <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
      <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

      <script type="text/javascript">
          $(function (){
              // 调用查询页面函数
              queryReturnInformationByPage(1,10);

              // 给查询书籍按钮添加单击事件
              $("#queryBorrows").click(function (){
                  queryReturnInformationByPage(1,$("#search_bo").bs_pagination('getOption','rowsPerPage'))
              });
          });

          // 根据条件查询所有的书籍信息
          function queryReturnInformationByPage(pageNo,pageSize){
              // 收集表单
              var bookName = $.trim($("#bookName").val());
              // 发送ajax请求查询信息
              $.ajax({
                  url: 'workbench/user/borrowAndReturnInfo/queryAllReturnForPage.do',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      bookName: bookName,
                      pageNo: pageNo,
                      pageSize: pageSize
                  },
                  success: function (res) {
                      var str = "";
                      str += "<tr>";
                      str += "<td>ISBN</td>";
                      str += "<td>书籍名称</td>";
                      str += "<td>用户账号</td>";
                      str += "<td>用户姓名</td>";
                      str += "<td>借阅时间</td>";
                      str += "<td>归还时间</td>";
                      str += "<td>是否超时归还</td>";
                      str += "</tr>";
                      // 渲染页面
                      $.each(res.books, function (index, obj) {
                          str += "<tr>";
                          str += "<td>" + obj.bookAccount + "</td>";
                          str += "<td>" + obj.bookName + "</td>";
                          str += "<td>" + obj.userAccount + "</td>";
                          str += "<td>" + obj.userName + "</td>";
                          str += "<td>" + obj.borrowDate + "</td>";
                          str += "<td>" + (obj.returnTime==null?'未归还':obj.returnTime) + "</td>";
                          str += "<td>" + (obj.islater==null?'未归还':(obj.returnTime=='0'?'延迟归还':'延迟归还')) + "</td>";
                          str += "</tr>";
                      });
                      $("#body").html(str);

                      // 计算总页数
                      var totalPages = Math.ceil(res.totalRows / pageSize);

                      // 对容器调用bs_pagination工具函数，显示翻页信息
                      $("#search_bo").bs_pagination({
                          currentPage: pageNo, // 当前页号，默认值1，相当于pageNo

                          // 必须满足 totalRows=totalPages*rowsPerPage
                          totalPages: totalPages, // 总页数，必填项
                          rowsPerPage: pageSize, // 每页显示条数，默认是10，相当于pageSize
                          totalRows: res.totalRows, // 总条数，默认值是1000

                          visiblePageLinks: 5, //最多可以显示的一组卡片数，默认是5

                          showGoToPage: true, // 是否显示跳转到第几页部分，默认是true
                          showRowsPerPage: true, // 是否显示每页显示条数部分，默认是true
                          showRowsInfo: true, //是否显示记录的信息部分，默认是true

                          // 用户每次切换页面的时候执行函数
                          // 该函数返回切换页号之后的pageNo和pageSize
                          onChangePage: function (event, pageObj) {
                              queryBookInformationByPage(pageObj.currentPage, pageObj.rowsPerPage);
                          }
                      })
                  }
              })
          }
      </script>
  </head>
  <body>

          <!--主窗口-->
          <div class="body_right">
              <div id="search">
                  <div id="search_head" style="margin-left: 345px;">
                      <form id ="form1" method="post" action="#">
                          <span>图书名称</span><input class="search_in" id="bookName" type="text"/>
                          <input class="search_id" type="button" id="queryBorrows" value="查询借阅信息">
                      </form>
                  </div>

                  <div id="search_body">
                      <table border="1px" id="body">

                      </table>
                  </div>

                  <div id="search_bo">

                  </div>
              </div>
          </div>
  </body>
</html>
